<template>
  <div
    style="
      position: absolute;
      right: 10px;
      top: 0px;
      display: flex;
      align-items: center;
    "
    class="tabLI"
  >
    <div
      v-for="(item, index) in tabList"
      :key="index"
      style="white-space: nowrap"
      class="tabItem"
      :class="value == item.value ? 'tabCLi' : 'tabCancel'"
      @click="getTab(item)"
    >
      {{ item.label }}
    </div>
  </div>
</template>
<script>
// 应用echarts主题
// import "echarts/theme/macarons.js";
import * as echarts from "echarts";

export default {
  title: "roundBar",
  data() {
    return {
      tabList: [],
      value: 1,
    };
  },
  props: {},
  mounted() {},
  methods: {
    getTab(item) {
      this.value = item.value;
      if (this.$parent.tabClick) {
        this.$parent.tabClick(item);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tabItem {
  // width: 120px;
  text-align: center;
  // margin: 0 -10px;
  cursor: pointer;
  font-size: 14px;
  padding: 5px 14px;
}
.tabCLi {
  background-image: url("~@/assets/images/jsgh/btn/yj_selected@2x.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #66ffff;
}
.tabCancel {
  background-image: url("~@/assets/images/jsgh/btn/yj_unselected@2x.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #fff;
}
</style>
